<template>
  <div>
    <navigationTitle></navigationTitle>
    <div id="login_bg"></div>
    <div id="logoin_content">
      <div class="input-cont">
        <div class="iconfont icon-yonghu"></div>
        <div class="type">{{language.first_name}}</div>
        <input type="text" v-model="info.first_name">
      </div>
      <div class="input-cont">
        <div class="iconfont icon-yonghu"></div>
        <div class="type">{{language.last_name}}</div>
        <input type="text" v-model="info.last_name">
      </div>
      <div class="input-cont">
        <div class="iconfont icon-yonghu"></div>
        <div class="type">{{language.username}}</div>
        <input type="text" v-model="info.username">
      </div>
      <div class="input-cont">
        <div class="iconfont icon-youxiang"></div>
        <div class="type">{{language.email}}</div>
        <input type="text" v-model="info.email">
      </div>
      <div class="input-cont">
        <div class="iconfont icon-iconfontmima"></div>
        <div class="type">{{language.password}}</div>
        <input type="password" v-model="info.password">
      </div>
      <button id="login_post" @click="login_post">{{language.signup_button}}</button>
      <div class="signup-subheader">{{language.signin_header}}</div>
      <a href="/pages/user/login/main" class="signup-button">{{language.login_btn}}</a>
    </div>
  </div>
</template>

<script>
import navigationTitle from "@/components/navigationTitle";

export default {
  data() {
    return {
      language: {
        first_name: this.$t("message.signup_first_name_label"),
        last_name: this.$t("message.signup_last_name_label"),
        username: this.$t("message.signin_username_hint_text"),
        email: this.$t("message.signup_email_label"),
        password: this.$t("message.signin_password_label"),
        login_btn: this.$t("message.signin_button_login"),
        forget_password: this.$t("message.signin_forget_password_title"),
        signin_header: this.$t("message.signin_header"),
        signup_button: this.$t("message.signup_button")
      },
      info: {
        email: '',
        last_name: '',
        first_name: '',
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login_post() {
      let _this = this;
      if (!_this.info.username || _this.info.username.length < 5) {
        _this.$store.state.showToast(this.$t("message.error_username_length"))
        return;
      }
      if (!_this.info.password) {
        _this.$store.state.showToast(this.$t("message.enter_a_password"))
        return;
      }
      if ( _this.info.password.length < 8) {
        _this.$store.state.showToast(this.$t("message.error_password_length"))
        return;
      }
      _this.$request({
        url: 'api/e/app/token/',
        data: _this.info,
      }).then((res)=>{
        console.log(res)
      })
    }
  },
  computed: {},
  components: {
    navigationTitle
  },

  onLoad() {
    let _this = this;
    // console.log(this.$i18n, this.language.login_btn);
    _this.$store.state.navigation.color = false;
    _this.$store.state.navigation.title = _this.$t("message.signup_header");
    _this.$store.state.navigation.icon = 'icon-yonghu';
  }
};
</script>

<style scoped lang="less">
@import url("../../../utils/public-color.less");

#login_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 178vw;
  z-index: 0;
  background: url("http://files.liujunjun.top/mini-program/Layer14.png") no-repeat;
  background-size: cover;
}
#logoin_content {
  position: relative;
  z-index: 1;
  padding-top: 5vw;
}

#logo {
  width: 30vw;
  height: 30vw;
  margin: 31vw - @page_padding_top auto 24vw;
  display: block;
  position: relative;
}
.input-cont {
  width: 93vw;
  position: relative;
  margin: 0 auto 6vw;
  padding-left: 16vw;
  box-sizing: border-box;
  border-bottom: .2vw solid #ccc;
  .iconfont {
    font-size: 6vw;
    color: @font_color;
    position: absolute;
    top: 0;
    left: 4vw;
  }
  .type {
    font-size: 3vw;
    color: @font_color;
  }
  input {
    height: 12.222vw;
    width: 100%;
  }
  a {
    position: absolute;
    right: 5.8vw;
    bottom: 3.4vw;
    font-size: 2.778vw;
  }
}
#login_post {
  width: 86.852vw;
  height: 14.722vw;
  line-height: 14.722vw;
  background-image: linear-gradient(0deg, #37a000 0%, #43c101 100%),
    linear-gradient(#f31541, #f31541);
  background-blend-mode: normal, normal;
  border-radius: 7.5vw;
  display: block;
  margin: 0 auto;
  font-size: 4.444vw;
  letter-spacing: 0.222vw;
  color: #ffffff;
}
.signup-subheader {
  margin-top: 13.704vw;
  text-align: center;
	letter-spacing: 0.139vw;
	color: @font_color;
}
.signup-button{
	font-size: 4.074vw;
	line-height: 4.62vw;
  letter-spacing: 0.204vw;
	color: @font_color;
  text-align: center;
  margin-top: 3.88vw;  
}
</style>

